<template>
  <div class="setpwd">
    <el-form
      label-position="top"
      label-width="auto"
      ref="pwdFormRef"
      :model="pwdForm"
      :rules="rules"
    >
      <el-form-item label="原密码" prop="oldPwd">
        <el-input
          v-model="pwdForm.oldPwd"
          placeholder="请输入旧密码"
          :prefix-icon="icon3"
          @focus="icon3 = 'Unlock'"
          @blur="icon3 = 'lock'"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input
          type="password"
          v-model="pwdForm.newPwd"
          :show-password="showPwd1"
          :prefix-icon="icon1"
          @focus="
            () => {
              showPwd1 = true
              icon1 = 'Unlock'
            }
          "
          @blur="
            () => {
              showPwd1 = false
              icon1 = 'lock'
            }
          "
          placeholder="请输入新密码"
        />
      </el-form-item>
      <el-form-item label="确认新密码密码" prop="newPwd2">
        <el-input
          type="password"
          v-model="pwdForm.newPwd2"
          :show-password="showPwd2"
          :prefix-icon="icon2"
          @focus="
            () => {
              showPwd2 = true
              icon2 = 'Unlock'
            }
          "
          @blur="
            () => {
              showPwd2 = false
              icon2 = 'Lock'
            }
          "
          placeholder="请再输入一次新密码"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(pwdFormRef)">修改</el-button>
        <el-button type="primary" @click="resetForm(pwdFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/modules/user'
import { setUserPwd } from '@/apis/user'
import { useRouter } from 'vue-router'
const pwdFormRef = ref<FormInstance>()
const router = useRouter()
const pwdForm = reactive({
  oldPwd: '',
  newPwd: '',
  newPwd2: ''
})
// 旧密码验证
const validateoldPwd = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入旧密码！'))
  } else {
    callback()
  }
}
// 新密码验证
const validatenewPwd = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入新密码！'))
  } else if (value === pwdForm.oldPwd) {
    callback(new Error('新密码跟旧密码一致！'))
  } else {
    callback()
  }
}
// 确认新密码验证
const validatenewPwd2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入确认新密码！'))
  } else if (value != pwdForm.newPwd) {
    callback(new Error('两次新密码不一致！'))
  } else {
    callback()
  }
}
// 表单验证规则
const rules = reactive<FormRules<typeof pwdForm>>({
  oldPwd: [{ validator: validateoldPwd, trigger: 'blur' }],
  newPwd: [{ validator: validatenewPwd, trigger: 'blur' }],
  newPwd2: [{ validator: validatenewPwd2, trigger: 'blur' }]
})
// 修改密码表单验证
const userStore = useUserStore()
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const res = await setUserPwd({
        oldPwd: pwdForm.oldPwd,
        id: userStore.user!.id,
        newPwd: pwdForm.newPwd
      })
      ElMessage({
        type: res.type,
        message: res.message
      })
      if (res.status === 200) {
        userStore.clearUser()
        router.push({
          path: '/login'
        })
      }
    } else {
      ElMessage({
        type: 'error',
        message: '表单输入有误'
      })
      return false
    }
  })
}
// 重置表单数据
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
// 新密码控制右边密码显示，获取焦点才出现
// 设置变量来控制密码框左边图标的修改
let icon1 = ref('Lock')
let icon2 = ref('Lock')
let icon3 = ref('Lock')
const showPwd1 = ref(false)
// 确认密码控制右边密码显示，获取焦点才出现
const showPwd2 = ref(false)
</script>

<style scoped lang="scss">
.setpwd {
  margin: 50px auto 0px;
  width: 40%;
  padding: 20px;
  box-shadow: 0px 0px 10px gray;
  //border: $border;
}
</style>
